<template>
  <div>
    <!-- 移动端展开按钮 -->
    <div class="mobile-nav-toggle" @click="toggleDrawer">
      <i class="el-icon-menu"></i>
    </div>

    <!-- 移动端抽屉效果 -->
    <el-drawer
      :visible="drawerVisible"
      :direction="drawerDirection"
      @closed="handleDrawerClose"
      :with-header="false"
      :size="drawerSize"
      :close-on-click-modal="true"
      @click-modal="handleClickModal"
      :before-close="handleDrawerClose"
    >
      <!-- 关闭按钮 -->
      <div class="close-btn" @click="handleDrawerClose">
        <i class="el-icon-close"></i>
      </div>

      <!-- 导航栏 -->
      <el-menu :default-active="activeIndex" mode="vertical" @select="handleSelect">
        <!-- 首页 -->
        <el-menu-item index="1">
          <i class="el-icon-house"></i>首页
        </el-menu-item>
        <!-- 故事 -->
        <el-menu-item index="2">
          <i class="el-icon-document"></i>故事
        </el-menu-item>
        <!-- 视频 -->
        <el-menu-item index="3">
          <i class="el-icon-video-camera"></i>视频
        </el-menu-item>
        <!-- 分组 -->
        <el-menu-item index="4">
          <i class="el-icon-folder"></i>分组
        </el-menu-item>
        <!-- 购物 -->
        <el-menu-item index="5">
          <i class="el-icon-shopping-cart-full"></i>购物
        </el-menu-item>
      </el-menu>
    </el-drawer>

    <!-- PC 端导航栏 -->
    <div class="navbar" v-if="!isMobile">
      <!-- Logo -->
      <div class="logo">
        <img src="https://element-plus.gitee.io/images/element-plus-logo.svg" alt="Logo">
      </div>

      <!-- 导航栏 -->
      <div class="nav-content navcoment">
        <el-menu :default-active="activeIndex" mode="horizontal" class="nav-menu" @select="handleSelect">
          <!-- 首页 -->
          <el-menu-item index="1">
            <i class="el-icon-house"></i>首页
          </el-menu-item>
          <!-- 故事 -->
          <el-menu-item index="2">
            <i class="el-icon-document"></i>故事
          </el-menu-item>
          <!-- 视频 -->
          <el-menu-item index="3">
            <i class="el-icon-video-camera"></i>视频
          </el-menu-item>
          <!-- 分组 -->
          <el-menu-item index="4">
            <i class="el-icon-folder"></i>分组
          </el-menu-item>
          <!-- 购物 -->
          <el-menu-item index="5">
            <i class="el-icon-shopping-cart-full"></i>购物
          </el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';

export default {
  name: 'Navbar',
  setup() {
    const activeIndex = ref('1'); // 默认激活的菜单项
    const drawerVisible = ref(false); // 抽屉可见性
    const isMobile = ref(false); // 是否为移动端
    const isSlab = ref(false); //是否为平板
 //    const drawer1 = ref(false);
    function cancelClick() {
      drawer1.value = false
    };
    // 处理菜单项选择事件
    const handleSelect = (index) => {
      console.log('选择了菜单项', index);
      // 可以在这里处理菜单项的点击事件，例如跳转到对应的路由
    };

    // 抽屉方向
    const drawerDirection = computed(() => {
      //return isMobile.value ? 'ltr' : 'rtl';
      if (isMobile.value) {
        return 'ltr'; // 移动端始终从左向右
      } else if (isSlab.value) {
        return 'ltr'; // 平板端也从左向右
      } else {
        return 'rtl'; // 其他情况从右向左
      }
    });

    // 抽屉宽度
    const drawerSize = computed(() => {
      if (isMobile.value) {
        return '60%'; // 移动端宽度设置为60%
      } else if (isSlab.value) {
        return '60%'; // 平板端宽度设置为60%
      } else {
        return ''; // 其他情况宽度为空
      }
    });

    // 打开抽屉时的回调
    const handleDrawerClose = () => {
      drawerVisible.value = false;
    };

    // 切换抽屉状态
    const toggleDrawer = () => {
      drawerVisible.value = !drawerVisible.value;
    };

    // 监听窗口大小变化，判断是否为移动端
    onMounted(() => {
      //移动端
      isMobile.value = window.innerWidth <= 768;
      window.addEventListener('resize', () => {
        isMobile.value = window.innerWidth <= 768;
      });
      //平板
      isSlab.value = window.innerWidth <= 998;
      window.addEventListener('resize', () => {
        isSlab.value = window.innerWidth <= 998;
      });
    });
    // 点击遮罩层事件处理函数
    const handleClickModal = () => {
      alert('你点击了遮罩层');
    };

    return {
      activeIndex,
      drawerVisible,
      isMobile,
      drawerDirection,
      drawerSize,
      handleSelect,
      handleDrawerClose,
      toggleDrawer,
      handleClickModal // 将点击遮罩层事件处理函数暴露出去
    };
  }
};
</script>

<style scoped>
/* 移动端展开按钮样式 */
.mobile-nav-toggle {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 20px;
  right: 20px; /* 将按钮放置在右边 */
  z-index: 9999;
  cursor: pointer;
}

/* 媒体查询：在小屏幕设备上显示展开按钮 */
@media screen and (max-width: 768px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar {
    display: none; /* 移动端隐藏 PC 端的导航栏 */
  }
}
/* 媒体查询：在小屏幕设备上显示展开按钮 */
@media screen and (max-width: 998px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar {
    display: none  /* 移动端隐藏 PC 端的导航栏 */
  }
  .navcoment{
    margin: 0 auto;
    display: none;
  }
}
/* PC 端导航栏样式 */
.navbar {
  display: flex;
}

.logo {
  width: 120px;
  float: left;
}

.nav-menu {
  flex-grow: 1; /* 导航栏占据剩余空间 */
  text-align: center; /* 居中显示导航项 */
}
.navcoment{
  margin: 0 auto;
}
/* 关闭按钮样式 */
.close-btn {
  text-align: right;
  margin-bottom: 10px;
  cursor: pointer;
}

.close-btn i {
  font-size: 20px;
  color: #999;
}
</style>
